<template>
  <div id="order">
    <!-- {{this.orderList}} -->
    <van-sticky>
      <van-nav-bar class="title">
        <template #title>
          <div>
            我的订单
          </div>
        </template>
        <template #right>
          <van-icon name="search" color="#fff" @click="onclickRight" size="18" />
        </template>
      </van-nav-bar>
      <van-search v-if="this.searchVisable" v-model="searchValue" @search="searchProduct" show-action
        placeholder="请输入订单号" @cancel="onCancel" />
    </van-sticky>

    <van-tabs animated sticky v-model="active"  color="#409eff" title-active-color="#409eff">
      <van-tab title="全部订单">
        <van-empty v-if="this.orderList.length == 0 && searchResult == true" description="您还没有订单" />
        <van-empty v-if="this.orderList.length == 0 && searchResult == false" description="未查询到该订单" />

        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <van-cell v-for="item in this.orderList" :key="item.id">
            <div class="box" @click="showProductDetail(item)">
              <div class="right">
                <span class="a">订单单号:{{item.id}}</span>
               <span class="a" style="color:black">订单状态:<span style="color:blue">{{item.status}}</span> </span>
                <span class="a">订单时间:{{item.orderTime | fmtDate_global}}</span>
                <span class="a">菜品信息:</span>
                <div class="product">
                  <!-- 测试 -->
                  <van-swipe indicator-color="rgb(0,0,0,0.1)">
                    <van-swipe-item v-for="value in item.orderLines.length" :key="value">
                      <van-grid icon-size="30" :border="false" :column-num="10">
                        <van-grid-item v-for="(product) in item.orderLines" :key="product.productId"
                          :icon="product.product.photo" />
                      </van-grid>
                    </van-swipe-item>
                  </van-swipe>
                </div>

                <!-- <span class="a">菜品信息:{{item.orderLines[0].product.name}}等</span> -->
                <span class="a">订单价格:{{item.total+".00"}}</span>
                <span
                  class="a">配送地址:{{item.address.provice }}{{item.address.city}}{{item.address.area}}{{item.address.address}}</span>
                <div class="img">
                </div>
              </div>
            </div>
          </van-cell>
        </van-list>
      </van-tab>

      <van-tab title="待支付">
        <van-empty v-if="this.waitPayOrderList.length == 0" description="没有待支付的订单" />
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <van-cell v-for="item in this.waitPayOrderList" :key="item.id">
            <div class="box" @click="showProductDetail(item)">

              <div class="right">
                <span class="a">订单单号:{{item.id}}</span>
                <span class="a" style="color:black">订单状态:<span style="color:blue">{{item.status}}</span> </span>
                <span class="a">订单时间:{{item.orderTime | fmtDate_global}}</span>
                <!-- 测试 -->
                <span class="a">菜品信息:</span>
                <van-swipe indicator-color="white">
                  <van-swipe-item v-for="value in item.orderLines.length" :key="value">
                    <van-grid icon-size="30" :border="false" :column-num="10">
                      <van-grid-item v-for="(product) in item.orderLines" :key="product.productId"
                        :icon="product.product.photo" />
                    </van-grid>
                  </van-swipe-item>
                </van-swipe>

                <span class="a">订单价格:{{item.total+".00"}}</span>
                <span
                  class="a">配送地址:{{item.address.provice }}{{item.address.city}}{{item.address.area}}{{item.address.address}}</span>
                <div class="img">
                </div>
              </div>
            </div>
          </van-cell>
        </van-list>
      </van-tab>
      <van-tab title="待派送">
        <van-empty v-if="this.waitSendOrderList.length == 0" description="您还没有待派送的订单" />
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">

          <van-cell v-for="item in this.waitSendOrderList" :key="item.id">
            <div class="box" @click="showProductDetail(item)">

              <div class="right">
                <span class="a">订单单号:{{item.id}}</span>
                <span class="a" style="color:black">订单状态:<span style="color:blue">{{item.status}}</span> </span>
                <span class="a">订单时间:{{item.orderTime | fmtDate_global}}</span>
                <!-- 测试 -->
                <span class="a">菜品信息:</span>
                <van-swipe indicator-color="white">
                  <van-swipe-item v-for="value in item.orderLines.length" :key="value">
                    <van-grid icon-size="30" :border="false" :column-num="10">
                      <van-grid-item v-for="(product) in item.orderLines" :key="product.productId"
                        :icon="product.product.photo" />
                    </van-grid>
                  </van-swipe-item>
                </van-swipe>
                <span class="a">订单价格:{{item.total+".00"}}</span>
                <span
                  class="a">配送地址:{{item.address.provice }}{{item.address.city}}{{item.address.area}}{{item.address.address}}</span>
                <div class="img">
                </div>
              </div>
            </div>
          </van-cell>
        </van-list>
      </van-tab>
      <van-tab title="已完成">
        <van-empty v-if="this.doneOrderList.length == 0" description="没有已完成订单" />
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">

          <van-cell v-for="item in this.doneOrderList" :key="item.id">
            <div class="box" @click="showProductDetail(item)">
             
              <div class="right">
                <span class="a">订单单号:{{item.id}}</span>
                 <span class="a" style="color:black">订单状态:<span style="color:blue">{{item.status}}</span> </span>
                <span class="a">订单时间:{{item.orderTime | fmtDate_global}}</span>
                 <span class="a">菜品信息:</span>
                <van-swipe indicator-color="white">
                  <van-swipe-item v-for="value in item.orderLines.length" :key="value">
                    <van-grid icon-size="30" :border="false" :column-num="10">
                      <van-grid-item v-for="(product) in item.orderLines" :key="product.productId"
                        :icon="product.product.photo" />
                    </van-grid>
                  </van-swipe-item>
                </van-swipe>
                <span class="a">订单价格:{{item.total+".00"}}</span>
                <span
                  class="a">配送地址:{{item.address.provice }}{{item.address.city}}{{item.address.area}}{{item.address.address}}</span>
                <div class="img">
                </div>
              </div>
            </div>
          </van-cell>
        </van-list>
      </van-tab>
    </van-tabs>
    <div style="height:100px"></div>
  </div>
</template>

<script>
  import {
    mapActions,
    mapMutations,
    mapState
  } from 'vuex'
  export default {
    data() {
      return {
        params: {
          page: 1,
          pageSize: 5,
        },
        searchVisable: false,
        loading: false,
        finished: false,
        searchValue: '',
        active: 0,
        searchResult: true
      }
    },
    methods: {
      ...mapActions('order', ["findAllOrderDataVuex"]),
      ...mapActions("user", ["getUserInfo"]),
      ...mapMutations('order', ['FIND_ORDER_BY_ID']),
      findAllOrderData() {
        this.findAllOrderDataVuex(
          this.params 
        );
      },
      onclickRight() {
        this.searchVisable = true;
      },

      onCancel() {
        this.searchVisable = false;
        this.searchValue = '';
        this.findAllOrderData();
        this.searchResult = !this.searchResult
      },

      searchProduct() {
        var reNumber = /^\d+$/
        this.searchResult = true
        if (this.searchValue.length == 0) {
          this.$toast.fail('输入不能为空')
        } else if (!reNumber.test(this.searchValue)) {
          this.$toast.fail('只能输入数字!')
        } else {
          this.FIND_ORDER_BY_ID(this.searchValue.trim())
          this.active = 0;
          if (this.orderList.length == 0) {
            this.searchResult = !this.searchResult

          }
        }
      },

      showProductDetail(item) {
        //console.log(item)
        this.$router.push({
          path: '/manager/orderDetail',
          query: {
            item
          }
        })
      },

      onLoad() {
        // 异步更新数据
        // setTimeout 仅做示例，真实场景中一般为 ajax 请求
        setTimeout(() => {

          this.params.pageSize += 5;
          this.findAllOrderData(this.params)

          // 加载状态结束
          this.loading = false;

          // 数据全部加载完成
          if (this.orderList.length >= 9) {
            this.finished = true;
          }
        }, 1000);
      },
    },
    computed: {
      ...mapState('order', ['orderList']),
      ...mapState("user", ["userInfo"]),
      waitPayOrderList: function () {
        return this.orderList.filter((order) => order.status == '待支付')
      },
      waitSendOrderList: function () {
        return this.orderList.filter((order) => order.status == '待派送')
      },
      doneOrderList: function () {
        return this.orderList.filter((order) => order.status == '已完成')
      },
      status: function () {
        let status = '已完成'
        if (this.active == 2) {
          status = '待支付'
        } else if (this.active == 3) {
          status = '待派送'
        } else if (this.active == 4) {
          status = '已完成'
        }
        return status;
      }
    },
    created() {
      this.getUserInfo().then((r) => {
        this.params.customerId = this.userInfo.id;
        // 获取订单数据
        this.findAllOrderData();

      });
    },
  }
</script>

<style scoped>
  .title {
    background-color: #409eff;
    border-bottom-right-radius: 5px;
    height: 40px;
  }

  .title div {
    color: #fff
  }


  .box {
    /* background-color: aqua; */
    width: 100%;
    height: 200px;
    margin: auto;
    border-radius: 5px;
    box-shadow: 0 0 2px 0 #ccc;
    display: flex;
    padding-top: 5px;
    margin-top: 10px
  }

  .icon {
    width: 80px;
    height: 80px;
    /* background-color: #9002bf; */
    border-radius: 50%;
    margin-left: 10px;
    box-sizing: border-box;
  }

  .icon img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    margin-top: 20px;
    margin-left: 10px;
  }

  .right {
    width: 260px;
    height: 200px;
    /* background-color: aqua; */
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    margin-left: 20px;

  }

  .product {
    box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.2);
    background-color: white;
    transition: 0.3s;
    width: 120%;
    border-radius: 5px;
    height: 90px;
    margin: auto;
  }

  /* .banner {
    width: 270px;
    height: 25px;
    background-color: aquamarine;
  } */
</style>